<script lang="ts" setup>
import type { wafRuleDetails } from '@/apis/model/waf'
import type { IMatchingGroup } from '@/components/MatchingRule/types'
// import ViewContent from './ViewContent.vue'
import { v4 as uuidV4 } from 'uuid'
// import { v4 as uuidV4 } from 'uuid'
// import { getApiWafApi } from '@/apis/modules/waf'
import { getCdnNodeWafIdApi } from '@/apis/modules/cdn.ts'
import { getFieldValue } from '@/components/MatchingRule/utils'
import {
  A_RESPONSE_TYPE,
  RESPONSE_TYPE_LIST,
  wafCustomOptions,
} from '@/constants/cdn-node'
import { getOptionsLabel } from '@/utils/cdn'

interface IProps {
  type: number
  ruleId: string
}
// const { visible: contentVisible, open } = usePopup()
const props = withDefaults(defineProps<IProps>(), {
  ruleId: '',
})
const visible = defineModel<boolean>({ required: true })
const formState = ref<wafRuleDetails>({})
/**
 * 当前所选择的字段配置项
 */
const ruleGroups = ref<IMatchingGroup[]>([
  {
    uuid: uuidV4(),
    rules: [
      {
        uuid: uuidV4(),
        field: '',
        operator: '',
        value: '',
        custom_field: '',
      },
    ],
  },
])

function handleOpen() {
  getCdnNodeWafIdApi({ id: props.ruleId }).then((res) => {
    formState.value = res?.info as wafRuleDetails
    ruleGroups.value[0].rules
      = res?.info?.conditions?.map((item) => {
        return {
          uuid: uuidV4(),
          ...item,
          value:
            getFieldValue(item)!.count > 1 ? item.value : item.value.toString(),
        }
      }) ?? []
  })
}

const whiteSkip = computed(() => {
  const skips: number[] = formState.value.module_config?.skip_module ?? []
  return skips?.map(item => getOptionsLabel(skipModuleOptions, item)).join('，')
})
const parseTimeDisplay = computed(() => (time?: string) => {
  if (!time)
    return ''
  const unit = time.slice(-1)
  const num = Number.parseInt(time.slice(0, -1))

  return `${num} ${getOptionsLabel(cacheTimeOptions, unit)}`
})
function handleClose() {
  visible.value = false
}
</script>

<template>
  <a-drawer
    v-model:visible="visible"
    title="规则详情"
    :width="1000"
    @before-open="handleOpen"
  >
    <a-form
      :model="formState"
      auto-label-width
    >
      <a-form-item label="规则名称">
        {{ formState.name ?? '' }}
      </a-form-item>
      <a-form-item
        v-if="type === 2"
        label="触发条件"
      >
        当计数值在 {{ parseTimeDisplay(formState.module_config?.cycle) }}内超过
        {{ formState.module_config?.count }} 次触发执行策略
      </a-form-item>
      <a-form-item label="匹配规则">
        <matching-rule-view
          v-model="ruleGroups"
          disabled-all
          class="w-full"
        />
      </a-form-item>
      <a-form-item
        v-if="type === 3"
        label="执行策略"
      >
        <span v-if="whiteSkip">
          跳过
          {{ whiteSkip }}
          模块
        </span>
        <span v-else>-</span>
      </a-form-item>
      <a-form-item
        v-else
        label="执行策略"
      >
        {{ getOptionsLabel(wafCustomOptions, formState.action ?? 1) }}
      </a-form-item>
      <a-form-item
        v-if="type === 2"
        label="持续时间"
      >
        {{ parseTimeDisplay(formState.module_config?.duration) }}
      </a-form-item>
      <template
        v-if="
          type !== 3
            && formState.action !== 3
            && formState.action !== 4
            && formState.action !== 5
        "
      >
        <a-form-item label="响应类型">
          {{
            getOptionsLabel(
              RESPONSE_TYPE_LIST,
              formState.response_page?.type ?? A_RESPONSE_TYPE.DEFAULT,
            )
          }}
        </a-form-item>
        <a-form-item label="响应代码">
          {{ formState.response_page?.code }}
        </a-form-item>
        <a-form-item
          v-if="formState.response_page?.type !== A_RESPONSE_TYPE.DEFAULT"
          label="响应内容"
        >
          <span
            class="cursor-pointer text-primary"
            @click="previewWithNewPage(formState.response_page!.body!)"
          >预览效果</span>
        </a-form-item>
      </template>
    </a-form>
    <!--
    <ViewContent
      v-model="contentVisible"
      :content="formState.response_page?.body"></ViewContent>
    -->
    <template #footer>
      <a-button @click="handleClose">
        关闭
      </a-button>
    </template>
  </a-drawer>
</template>

<style lang="less" scoped>
.arco-drawer {
  .arco-form {
    :deep(.arco-form-item-label) {
      color: var(--color-text-3) !important;
      line-height: 20px !important;
      height: 22px;
      text-align: center;
    }
    :deep(.arco-form-item-content) {
      font-size: 12px;
    }
    :deep(.arco-row) {
      .arco-form-item-content,
      .arco-form-item-wrapper-col {
        min-height: 20px;
      }
    }
  }
}
</style>
